<template>
  <div class="personal">
    <!-- title -->
    <ProTitle title="个人中心">
      <template #default>
        <el-radio-group
          v-model="radioValue"
          size="large"
          class="toggle"
          @change="radioValueChange"
        >
          <el-radio-button :label="true" border>
            个人资料
          </el-radio-button>
          <el-radio-button :label="false" border>
            修改密码
          </el-radio-button>
        </el-radio-group>
      </template>
    </ProTitle>

    <!-- 表单 -->
    <div class="cont">
      <transition name="slide-fade" mode="out-in">
        <template #default>
          <div v-if="radioValue">
            <!-- 个人资料 -->
            <div class="count_form">
              <el-form :model="self" size="large">
                <el-form-item label="姓 名" label-width="100">
                  <el-input v-model="self.username" disabled placeholder="" />
                </el-form-item>
                <el-form-item label="用户名" label-width="100">
                  <el-input v-model="self.id" disabled placeholder="" />
                </el-form-item>
                <el-form-item label="账号" label-width="100">
                  <el-input v-model="self.card" disabled placeholder="" />
                </el-form-item>
                <el-form-item label="权限说明" label-width="100">
                  <el-input v-model="self.description" disabled placeholder="" />
                </el-form-item>
                <el-form-item label="邮箱" label-width="100">
                  <el-input v-model="self.email" placeholder="" />
                </el-form-item>
                <el-form-item label="部门" label-width="100">
                  <el-input v-model="self.depart" placeholder="" />
                </el-form-item>
                <el-form-item label="">
                  <el-button type="primary" style="margin: 0 auto;">
                    保存
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div v-else>
            <!-- 修改密码 -->
            <div class="count_form">
              <el-form
                ref="ruleFormRef"
                :model="updatePass"
                :rules="rules"
                size="large"
              >
                <el-form-item label="原密码" label-width="100" prop="password">
                  <el-input
                    v-model="updatePass.password"
                    type="password"
                    show-password
                    placeholder="请输入原始密码"
                  />
                </el-form-item>
                <el-form-item label="新密码" label-width="100" prop="newword">
                  <el-input
                    v-model="updatePass.newword"
                    type="password"
                    show-password
                    placeholder="请输入新密码"
                  />
                </el-form-item>
                <el-form-item label="确认密码" label-width="100" prop="reword">
                  <el-input
                    v-model="updatePass.reword"
                    type="password"
                    show-password
                    placeholder="请确认密码"
                  />
                </el-form-item>
                <el-form-item label="">
                  <el-button type="primary" style="margin: 0 auto;" @click="updatePassSubmit(ruleFormRef)">
                    保存
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </template>
      </transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElNotification } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
// import ProTitle from '../../components/title/index.vue'

const radioValue = ref(true)
const radioValueChange = () => {
  // console.log(radioValue.value)
}
// 个人资料
const self = reactive(
  {
    username: '杨总',
    id: 'admin',
    card: '1102258459',
    description: '超级管理员',
    email: 'admin@yang.com',
    depart: '物流部'
  }
)
// 修改密码
const updatePass = reactive({
  password: '',
  newword: '',
  reword: '',
})
// 表单实例
const ruleFormRef = ref<FormInstance>()

// 表单校验
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (value !== updatePass.newword) {
    callback(new Error('两次密码必须一致'))
  } else {
    callback()
  }
}
const rules = reactive<FormRules>({
  password: [
    { required: true, message: '请输入原始密码', trigger: 'blur' },
  ],
  newword: [
    { required: true, message: '请输入新密码', trigger: 'blur' }
  ],
  reword: [
    { validator: validatePass2, trigger: 'blur' },
  ],
})
// 修改面
const updatePassSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElNotification({
        title: '成功',
        message: '搜索成功',
        type: 'success',
      })
    } else {
      ElMessage.error('请填写详细检索条件')
    }
  })
}
</script>

<style scoped lang="less">
/* start */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.3s ease-in;
}

.slide-fade-enter-from {
  transform: translateX(-20px);
  opacity: 0;
}
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
/* end */
.toggle {
  margin-bottom: 30px;
  .el-radio-button {
    width: 100px;
    height: 55px;
    margin-right: 30px;
    box-sizing: border-box;
    ::v-deep span {
      border-left: 1px solid #dcdfe6;
    }
  }
  ::v-deep .el-radio-button__original-radio:checked + .el-radio-button__inner {
    border-color: var(--el-color-primary);
  }
}
.cont {
  width: 79vw;
  height: calc(100vh - 330px);
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    border-radius: 10px;
    padding: 70px 40px;
    background: #fff;
    margin-top: 15px;
}
.count_form{
  max-width: 350px;
}
</style>